<template>
  <section class="c-text-hidden" :class="[item.isShowWhitelace && item.orderBy != 2 ? 'c-ph24 c-pv30' :'', !isSetPageBackground ? 'c-bg-white' : '']">
    <div v-if="item.modelType == 34 && [5, 6, 7].includes(item.colNum)">
      <div v-for="(sItem, sIndex) in colList" :key="sIndex" class="c-flex-row"  :class="item.isShowWhitelace == 0 || (item.isShowWhitelace == 1 && (sIndex == (colList.length - 1))) ? '' : 'c-mb24'">
        <template v-if="item.colNum == 5">
          <div :class="item.isShowWhitelace == 1 ? 'c-pr24 ww412 c-hh260' : 'ww427 hh281'">
            <img class="c-w100 c-h c-object-fit-cover" :style="(item.modelType == 33 || item.modelType == 34) ? getBorderRadius(borderRadius, '0.4rem') : ''" :src="$addXossFilter(sItem[0].image, require('@/assets/defult270.png'))" @click="clickItem(sItem[0])" v-if="sItem&&sItem[0]"/>
          </div>
          <!-- :class="[item.isShowWhitelace == 1 ? 'ww180' : 'ww213']" -->
          <div class="c-flex-column c-flex-1" >
            <img class="c-w100 c-object-fit-cover" :style="(item.modelType == 33 || item.modelType == 34) ? getBorderRadius(borderRadius, '0.4rem') : ''" :class="[item.isShowWhitelace == 1 ? 'c-mb24 hh118' : 'hh141']" :src="$addXossFilter(sItem[1].image, require('@/assets/defult270.png'))" @click="clickItem(sItem[1])" v-if="sItem&&sItem[1]"/>
            <img class="c-w100 c-object-fit-cover" :style="(item.modelType == 33 || item.modelType == 34) ? getBorderRadius(borderRadius, '0.4rem') : ''" :class="[item.isShowWhitelace == 1 ? 'hh118' : 'hh141']" :src="$addXossFilter(sItem[2].image, require('@/assets/defult270.png'))" @click="clickItem(sItem[2])" v-if="sItem&&sItem[2]"/>
          </div>
        </template>
        <template v-else-if="item.colNum == 7">
          <div :class="item.isShowWhitelace == 1 ? 'ww292 hh228 c-mr16' : 'ww324 hh252'">
            <img class="c-w100 c-h c-object-fit-cover" :style="(item.modelType == 33 || item.modelType == 34) ? getBorderRadius(borderRadius, '0.4rem') : ''" :src="$addXossFilter(sItem[0].image, require('@/assets/defult270.png'))" @click="clickItem(sItem[0])" v-if="sItem&&sItem[0]"/>
          </div>
          <div class="c-flex-column c-h" :class="[item.isShowWhitelace == 1 ? 'ww284' : 'ww316']">
            <img class="c-w100 c-object-fit-cover" :style="(item.modelType == 33 || item.modelType == 34) ? getBorderRadius(borderRadius, '0.4rem') : ''" :class="[item.isShowWhitelace == 1 ? 'c-mb16 c-hh100' : 'c-hh120']" :src="$addXossFilter(sItem[1].image, require('@/assets/defult270.png'))" @click="clickItem(sItem[1])" v-if="sItem&&sItem[1]"/>
            <div class="c-flex-row c-aligni-center c-justify-sb">
              <img class="c-w100 c-object-fit-cover" :style="(item.modelType == 33 || item.modelType == 34) ? getBorderRadius(borderRadius, '0.4rem') : ''" :class="[item.isShowWhitelace == 1 ? 'hh112 ww134' : 'c-hh132 ww158']" :src="$addXossFilter(sItem[2].image, require('@/assets/defult270.png'))" @click="clickItem(sItem[2])" v-if="sItem&&sItem[2]"/>
              <img class="c-w100 c-object-fit-cover" :style="(item.modelType == 33 || item.modelType == 34) ? getBorderRadius(borderRadius, '0.4rem') : ''" :class="[item.isShowWhitelace == 1 ? 'hh112 ww134' : 'c-hh132 ww158']" :src="$addXossFilter(sItem[3].image, require('@/assets/defult270.png'))" @click="clickItem(sItem[3])" v-if="sItem&&sItem[3]"/>
            </div>
          </div>
        </template>
        <template v-else>
          <!-- :class="[item.isShowWhitelace == 1 ? 'ww180' : 'ww213']" -->
          <div class="c-flex-column c-flex-1" >
            <img class="c-w100 c-object-fit-cover" :style="(item.modelType == 33 || item.modelType == 34) ? getBorderRadius(borderRadius, '0.4rem') : ''" :class="[item.isShowWhitelace == 1 ? 'c-mb24 hh118' : 'hh141']" :src="$addXossFilter(sItem[0].image, require('@/assets/defult270.png'))" @click="clickItem(sItem[0])" v-if="sItem&&sItem[0]"/>
            <img class="c-w100 c-object-fit-cover" :style="(item.modelType == 33 || item.modelType == 34) ? getBorderRadius(borderRadius, '0.4rem') : ''" :class="[item.isShowWhitelace == 1 ? 'hh118' : 'hh141']" :src="$addXossFilter(sItem[1].image, require('@/assets/defult270.png'))" @click="clickItem(sItem[1])" v-if="sItem&&sItem[1]"/>
          </div>
          <div :class="item.isShowWhitelace == 1 ? 'c-pl24 ww412 c-hh260' : 'ww427 hh281'" v-if="sItem&&sItem[2]">
            <img class="c-w100 c-h c-object-fit-cover" :style="(item.modelType == 33 || item.modelType == 34) ? getBorderRadius(borderRadius, '0.4rem') : ''" :src="$addXossFilter(sItem[2].image, require('@/assets/defult270.png'))" @click="clickItem(sItem[2])"/>
          </div>
        </template>
      </div>
    </div>
    <div class="c-flex-row c-flexw-wrap" v-else>
      <div v-for="(sItem, sIndex) in item.items" :key="sIndex" @click="clickItem(sItem)" :class="[colPicWidth, margin(sIndex, item.colNum), (sIndex != item.items.length -1) && (item.isShowWhitelace == 1) && item.modelType == 33 ? 'c-mb12' : '']">
        <img class="c-w100" :style="(item.modelType == 33 || item.modelType == 34) ? getBorderRadius(borderRadius, '0.4rem') : ''" :src="$addXossFilter(sItem.image, require('@/assets/defult270.png'))" />
      </div>
    </div>
  </section>
</template>
<script>
import { custIndex } from "@/mixin/custIndex.js";
import { customStyle } from '@/utils/customStyle.js'
export default {
  name: 'multiColumnPic',
  mixins: [custIndex, customStyle],
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    modelType: {
      type: Number,
      defalut: 1
    },
    upgradeMemberJump: {
      type: String,
      default: ''
    },
    pageName: {//首页 INDEX 预览页 PREVIEW_INDEX 微页面 MICRO_PAGE
      type: String,
      default: "INDEX"
    },
  },
  data() {
    return {
      colList: [],
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0
    };
  },
  computed: {
    borderRadius() {
      return this.item.styleParam && this.item.styleParam.borderRadius ? this.item.styleParam.borderRadius : null
    },
    imageSetting() {
      return this.item.styleParam && this.item.styleParam.imageSetting ? this.item.styleParam.imageSetting : null
    },
    colPicWidth() {
      if (this.item.modelType == 33) {
        return 'c-w100';
      } else {
        if (this.item.isShowWhitelace == 0) {
          return this.item.colNum == 3 ? 'c-w333' : (this.item.colNum == 4 ? 'c-w25' : 'c-w50');
        } else {
          return this.item.colNum == 3 ? 'w33' : (this.item.colNum == 4 ? 'w25' : 'w50');
        }
      }
    },
    margin() {
      return function (index, col) {
        if (this.item.isShowWhitelace == 0 || this.item.modelType == 33) {
          return '';
        }
        let mr = '';
        let mt = '';
        col = col == null ? 2 : col;
        if (col == 2) {
          mr = (index + 1) % 2 == 0 ? '' : 'c-mr24';
          mt = (index + 1) > 2 ? 'c-mt24' : '';
        } else if (col == 3) {
          mr = (index + 1) % 3 == 0 ? '' : 'c-mr24';
          mt = (index + 1) > 3 ? 'c-mt24' : '';
        } else if (col == 4) {
          mr = (index + 1) % 4 == 0 ? '' : 'c-mr24';
          mt = (index + 1) > 4 ? 'c-mt24' : '';
        }
        return `${mr}  ${mt}`;
      }
    },
  },
  created() {
    if (this.item.modelType != 34) return
    if ([5, 6].includes(this.item.colNum)) {
      for (let i = 0; i < this.item.items.length; i += 3) {
        this.colList.push(this.item.items.slice(i, i + 3))
      }
    } else if (this.item.colNum == 7) {
      for (let i = 0; i < this.item.items.length; i += 4) {
        this.colList.push(this.item.items.slice(i, i + 4))
      }
    }
  },
  methods: {
    // 点击导航
    clickItem(data) {
      data.pageName = this.pageName;
      data.upgradeMemberJump = this.upgradeMemberJump;
      this.commonModuleRouterPush(data)
    },
  },
};
</script>

<style scoped>
.c-w333 { width: 33.33%; }
.w50 { width: calc((100% - 0.6rem) / 2); }
.w33 { width: calc((100% - 1.2rem) / 3); }
.w25 { width: calc((100% - 1.8rem) / 4); }
.twoThirds { width: calc(100% / 3 * 2); }
.ww412 { width: 10.3rem; }
.ww427 { width: 10.675em; }
.ww180 { width: 4.5rem; }
.ww213 { width: 5.325rem; }
.hh281 { height: 7.025rem; }
.hh118 { height: 2.95rem; }
.hh141 { height: 3.525rem; }
.c-hh260 {
  height: 6.5rem;
}
.ww292 {
  width: 7.3rem;
}
.ww284 {
  width: 7.1rem;
}
.ww134 {
  width: 3.35rem;
}
.hh228 {
  height: 5.7rem;
}
.hh112 {
  height: 2.8rem;
}
.ww324 {
  width: 8.1rem;
}
.ww316 {
  width: 7.9rem;
}
.hh252 {
  height: 6.3rem
}
.ww158 {
  width: 3.95rem;
}
</style>